<template>
  <div class="zc-view">
    <div class="zc-view-box">
      <div class="zc-view-box-center">
        <div class="title">基本信息</div>
        <div class="form">
          <el-form
            :inline="true"
            label-position="right"
            label-width="130px"
            :model="formInline"
            class="demo-form-inline"
          >
            <el-form-item label="姓名：">
              <el-input v-model="formInline.user" placeholder="请填写真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="身份证号：">
              <el-input v-model="formInline.idCard" placeholder="请填写真实身份证号码"></el-input>
            </el-form-item>
            <el-form-item label="代理人姓名：">
              <el-input v-model="formInline.idCard" placeholder="请填写代理人姓名"></el-input>
            </el-form-item>
            <el-form-item label="代理人身份证号：">
              <el-input v-model="formInline.idCard" placeholder="请填写代理人身份证号"></el-input>
            </el-form-item>
            <el-form-item label="手机号码：">
              <el-input v-model="formInline.idCard" placeholder="请填写手机号码"></el-input>
            </el-form-item>
            <el-form-item label="通讯地址：">
              <el-input v-model="formInline.idCard" placeholder="请填写通讯地址"></el-input>
            </el-form-item>
            <el-form-item label="类型：">
              <el-select v-model="formInline.type" placeholder="--请选择--">
                <el-option label="全部" value="0"></el-option>
                <el-option label="建卡贫困户" value="1"></el-option>
                <el-option label="户改退地" value="2"></el-option>
                <el-option label="异地扶贫搬迁" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="去向：">
              <el-select v-model="formInline.state" placeholder="--请选择--">
                <el-option label="全部" value="0"></el-option>
                <el-option label="投靠子女" value="1"></el-option>
                <el-option label="外地发展" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="zc-view-box-center">
        <div class="title">家庭成员信息</div>
        <div class="table-box">
          <el-button style="margin-bottom:20px;" type="primary" @click="editClick">
            <i class="el-icon-plus"></i> 添加
          </el-button>
          <xTable
            :loading="loading"
            :head="head1"
            :tableData="tableData"
            @on-changePage="(v)=>getData(v)"
            :btn="btn1"
            @on-bjClick="bjClick"
            @on-scClick="scClick"
          />
        </div>
      </div>
      <div class="zc-view-box-center">
        <div class="title">权证信息</div>
        <div class="form">
          <el-form
            :inline="true"
            label-position="right"
            label-width="130px"
            :model="formInline"
            class="demo-form-inline"
          >
            <el-form-item label="证件类型：">
              <el-select v-model="formInline.type" placeholder="--请选择--">
                <el-option label="全部" value="0"></el-option>
                <el-option label="集体土地使用证" value="1"></el-option>
                <el-option label="房地产权证" value="2"></el-option>
                <el-option label="其他" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码：">
              <el-input v-model="formInline.user" placeholder="请填写证件号码"></el-input>
            </el-form-item>
            <el-form-item label="发证时间：	">
              <el-date-picker v-model="formInline.idCard" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="土地使用权面积：">
              <el-input v-model="formInline.idCard" placeholder="请填写土地使用权面积">
                <span slot="suffix">㎡</span>
              </el-input>
            </el-form-item>
            <el-form-item label="权利人：">
              <el-input v-model="formInline.idCard" placeholder="请填写权利人"></el-input>
            </el-form-item>
            <el-form-item label="土地坐落：">
              <el-input v-model="formInline.idCard" placeholder="请填写土地坐落"></el-input>
            </el-form-item>
            <el-form-item class="layout-line" label="是否愿意预留农村发展指标：">
              <el-select v-model="formInline.state" placeholder="--请选择--">
                <el-option label="全部" value="0"></el-option>
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="zc-view-box-center">
        <div class="title">附件信息</div>
        <div class="table-box">
          <xTable
            :loading="loading"
            index
            :head="head2"
            :tableData="tableData"
            @on-changePage="(v)=>getData(v)"
            :btn="btn2"
            @on-lookClick="lookClick"
            @on-xzClick="xzClick"
          />
        </div>
      </div>
      <div style="margin:20px">
        <el-button type="primary">确定</el-button>
        <el-button>取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import xTable from "@/views/xtable.vue";
export default {
  name: "Bmap",
  data() {
    return {
      btn1: {
        bj: { name: "编辑", way: "on-bjClick" },
        sc: { name: "删除", way: "on-scClick" }
      },
      head1: {
        a: "姓名",
        b: "与申请人关系",
        c: "手机号码",
        d: "身份证号码"
      },
      btn2: {
        bj: { name: "查看", way: "on-lookClick" },
        sc: { name: "下载", way: "on-xzClick" }
      },
      head2: {
        date: "证件类型"
      },
      tableData: [],
      loading: false,
      way: this.$route.query.way,
      formInline: {}
    };
  },
  components: {
    xTable
  },
  methods: {
    goBack() {
      console.log("go back");
      this.$router.go(-1);
    },
    lookClick(item) {
      console.log(item);
    },
    xzClick(item) {},
    bjClick(item) {},
    scClick(item) {},
    editClick() {}
  },
  mounted() {
    console.log(this.way);
  }
};
</script>

<style lang="scss" scoped>
.zc-view {
  padding: 30px;
  .bm-view {
    width: 500px;
    height: 400px;
    margin: 0 0 20px 30px;
  }
}
.zc-view-box {
  border: 1px solid #f5f5f5;
  overflow: hidden;
  .zc-view-box-top {
    padding: 40px 20px;
    span {
      font-size: 14px;
      color: #999;
      line-height: 30px;
      margin-right: 30px;
    }
  }
  .zc-view-box-center {
    .title {
      color: #48494d;
      font-weight: bold;
      text-indent: 20px;
      line-height: 50px;
      background: #f8f8f8;
      margin-bottom: 20px;
    }
    .table-box {
      padding: 0 30px;
    }
  }
}
.form {
  padding: 10px 20px;
  /deep/ .el-form--inline .el-form-item {
    width: 48%;
  }
}
.table-box {
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.form /deep/ .el-input__inner {
  width: 200px;
}
.layout-line /deep/ .el-form-item__label {
  line-height: 20px;
}
</style>
